Lektion 4
Grafik und Hyperlinks



In dieser Lektion erfahren Sie Folgendes:

  1. Pfadangaben in HTML-Dokumenten
  2. Hintergrundbilder - Wallpaper
  3. Hyperlinks
  4. Hyperlinks mit Grafiken
  5. Hyperlink-Farben
  6. Hyperlink-Target
  7. Hyperlinks und Anker
  8. E-Mail

Hyperlinks sind das wichtigste Element des Internets. Sie klicken sich von Seite zu Seite. In dieser Lektion erfahren Sie, wie Hyperlinks aufgebaut sind und wie Sie die verschiedenen Möglichkeiten für Hyperlinks zum Einsatz bringen.
Pfadangaben im HTML-Dokumenten

Die nachfolgenden Angaben zu Pfaden werden mit Grafik erklärt, gelten aber auch für Pfadangaben in Hyperlinks.

Es gibt relative und absolute Pfadangaben in HTML. Eine absolute Pfadangabe gibt den exakten Weg durch das Internet zu einer bestimmten Datei an. http://www.LernenImInternet.de/index3.html ist eine absolute Pfadangabe. 
Absolute Pfadangaben sind bei Hyperlinks auf andere Webseiten erforderlich.

Es empfiehlt sich grundsätzlich, nur Grafiken einzubinden, die sich auf Ihrem eigenen Server befinden. Bei Grafiken aus anderen Webprojekten können Sie nicht gewährleisten, dass diese Grafik auch immer geladen werden kann. Die Grafik könnte auch ohne Ihr Wissen entfernt worden sein. 

Die Pfadangabe zu Grafiken in Ihrem Projekt erfolgt relativ. Eine relative Pfadangabe gibt den Weg (Pfad) zu einer anderen Datei an, ausgehend von der Position der aktuell geöffneten Datei.

In die HTML-Datei index.html soll eine Grafik eingebunden werden. Relative Pfadangabe bedeutet: Der Pfad zur Bilddatei muss ausgehend vom Speicherort der Datei index.html angegeben werden.

Solange sich die Grafik im gleichen Ordner befindet wie die aktuelle HTML-Datei, in die die Grafik eingebunden wird, verwenden Sie die Syntax:
<img src="bild.gif" width="400" height="50" >
 

1. Fall
Befindet sich die Datei in einem Unterordner des aktuellen Ordners, lautet die Pfadangabe: img src="unterordner/bild.gif" . 
 

Die aktuell geöffnete Datei befindet sich im Ordner (Verzeichnis) Html, die Grafik mit dem Dateinamen bild.gif befindet sich im Ordner (Unterverzeichnis) Bilder.
 

<img src="Bilder/bild.gif" width="400" height="50" >
2. Fall
Die aktuelle geöffnete Datei befindet sich im Ordner Html. Die Grafik mit dem Dateinamen bild.gif befindet sich im Ordner Bilder.
Die beiden Ordner liegen nebeneinander - sind auf der gleichen Ebene.

<img src="../Bilder/bild.gif" width="400" height="50" >

Im Gegensatz zum ersten Beispiel wird die Pfadangabe jetzt mit ../ eingeleitet. Mit diesen Zeichen wird signalisiert, dass zunächst eine Ordnerebene zurück und dann in den Ordner Bilder abgezweigt werden soll.

3. Fall
Der Ordner Bilder enthält zwei Ordner mit namen gif und jpg. 
Die aktuelle HTML-Datei befindet sich im Ordner Html. 
Die Grafik hat den Dateinamen bild.gif und befindet sich im Ordner Bilder im Unterordner gif.

<img src="../Bilder/gif/bild.gif" width="400" height="50" >

Sie wechseln mit ../ aus dem aktuellen Ordner Html in den übergeordneten Ordner und von da aus in den Ordner Bilder und in den Ordner gif.
 

4. Fall
Die aktuelle Datei befindet sich im Ordner Kurs innerhalb des Ordners Html. 
Die Grafikdatei befindet sich im Ordner jpg des Ordners Bilder:
 

<img src="../../Bilder/jpg/bild.gif" width="400" height="50" >

Mit ../../ gehen Sie zwei Ordner-Ebenen nach vorne und wechseln dann in den Ordner Bilder/jpg

Das Prinzip:
Sie gehen mit ../ immer eine Ordner-Ebene nach vorne und verzweigen mit ordner1/ordner2/ordner3/ in den Ordner in dem sich Ihre Grafik befindet.

Beispiel:
../../../../bilder/gif/neue/bild.gif wechselt zunächst vier Ordnerebenen nach vorne und verzweigt dann in den Ordner bilder mit dem Ordner gif und dem Ordner neue, in dem sich die Datei bild.gif befindet.
 
Sie können auch absolute Pfadangaben zu Ihren Grafiken verwenden. Der Nachteil sind wesentlich längere Pfadangaben. Sie müssen, nachdem Sie Ihre Seiten lokal auf Ihrem Rechner erstellt und getestet haben, alle Angaben so abändern, dass die Pfade im Internet funktionieren.
Der große Vorteil relativer Angaben liegt in der Portierbarkeit Ihrer Seiten. D.h., wenn Sie den Provider wechseln, funktionieren die Pfade sofort wieder, da sie nicht an eine absolute Adresse gebunden sind.
Hintergrundbilder Wallpaper

HTML bietet die Möglichkeit, für eine Seite ein Hintergrundbild (Wallpaper) einzubinden. Sie können eine gif- oder jpg-Datei verwenden. Die Grafik wird bei der Darstellung so oft wiederholt, bis der komplette Hintergrund des angezeigten Dokuments ausgefüllt ist. 

Angenommen, das Anzeigefenster im Browser sei ca. 800 Pixel breit und 600 Pixel hoch. Sie verwenden eine Grafik mit 100 Pixel Breite und 10 Pixel Höhe. Rein rechnerisch wird das Hintergrundbild zunächst 8 mal nebeneinander (8 x 100 Pixel = 800 Pixel) gelegt. Diese horizontale Struktur wird noch 60 mal vertikal übereinander gelegt (60 x 10 Pixel =600 Pixel). 

Beim Einsatz von Wallpapern ist zu beachten: Je größer die Datei, umso größer ist die Ladezeit des Bildes. Die Konsequenz: Der Inhalt der Datei ist oftmals schon vollständig geladen und sichtbar, und das Hintergrundbild folgt ganz zum Schluss. Das erzeugt merkwürdige Erscheinungsformen am Bildschirm des Betrachters. Testen Sie Ihre Hintergrundbilder nicht offline! Laden Sie Ihre Seite ins Web und testen Sie dort! Sorgen Sie dafür, dass die Datei auch wirklich neu geladen wird (aktualisieren bzw. neu laden)! Lassen Sie die Seite unter dem Aspekt Ladegeschwindigkeit auch von anderen Leuten testen!
 

Einbinden eines Wallpapers:

Die Grafik für den Hintergrund wird im body-Tag eingebunden:

background="hintergr.jpg"

Für Pfad und Dateiname gelten die bekannten Regeln:
 

<body background="bild.jpg">

Erweitern Sie das bereits vorhandene body-Tag. Fügen Sie kein neues body-Tag hinzu.
Hyperlinks

Fast das Wichtigste im Internet sind die Hyperlinks. Sie klicken auf einen Schriftzug oder eine Grafik, und es erscheint eine neue Seite.
Um einen Hyperlink einzubinden, benötigen Sie zwei Dinge: 
  • Ein Ziel - eine Datei, die geöffnet werden soll und
  • Einen Hyperlink-Text - ein Text (oder eine Grafik) der angeklickt wird. 
Die Hyperlinks werden an einen sogenannten Anker (engl. anchor) gekoppelt und mit der Hyperlink-Referenz (Ziel) und dem Hyperlink-Text versehen. Sie wollen von Ihrer Seite aus einen Hyperlink auf meine Seite setzen. Das Ziel ist somit http://www.LernenImInternet.de, und der Text (Hyperlink-Text) zum Anklicken lautet "mitmachen lohnt sich".

<a href="http://www.LernenImInternet.de">mitmachen lohnt sich</a>
Der  grundsätzliche Aufbau:
<a href="Ziel des Hyperlinks in Anführungszeichen">Hier steht der Text zum Anklicken</a>.
Vergessen Sie nicht das abschließende </a>, sonst wird der Rest Ihres Dokuments zum Hyperlink.

Beispiel:
Hyperlink auf eine andere WebSite (mit absoluter Pfadangabe):
 

<a href="http://www.LernenImInternet.de">mitmachen lohnt sich</a>

Sieht so aus:
 mitmachen lohnt sich

Die Einstellungen für Farbe und die Unterstreichung übernimmt Ihr Browser.

Beispiel:

Hyperlink auf eine Seite innerhalb Ihrer Seite (mit relativer Pfadangabe):
 

<a href="seite2.htm">weiter</a>

Die Datei seite2.htm befindet sich im gleichen Ordner wie die aktuelle Datei. Für die Pfadangaben gelten die gleichen Regeln wie bei der Referenzierung von Grafiken.
 

Beispiel:

Hyperlink auf eine Seite innerhalb Ihrer Seite (mit relativer Pfadangabe):
 

<a href="texte/seite2.htm">weiter</a>

Die Datei seite2.htm befindet sich in dem Ordner texte, der Ordner texte ist ein Unterordner des aktuellen Ordners.

Beispiel:
Hyperlink auf eine andere Seite in einer anderen Site (nur mit absoluter Pfadangabe):

<a href="http://www.LernenImInternet.de/index3.html">Startseite HTML-Kurs</a>

Bei absoluten Pfadangaben müssen Sie immer http://www. mit angeben!
Hyperlinks mit Grafiken

Binden Sie anstatt des Hyperlink-Textes eine Grafik ein, und der Hyperlink erfolgt durch einen Klick auf die Grafik.

<a href="http://www.LernenImInternet.de"><img src="jaitner.gif" width="468" height="60"></a>
Sieht so aus:
 
 


Beachten Sie die Pfadangaben für Grafik und Hyperlink!

Sie können grundsätzlich Grafik und Text gemeinsam notieren:
<a href="http://www.LernenImInternet.de"><img src="jaitner.gif" width="468" height="60">mitmachen lohnt sich</a>. 
Es empfiehlt sich jedoch die getrennte Notierung.
<a href="http://www.LernenImInternet.de"><img src="jaitner.gif" width="468" height="60"></a>.
<a href="http://www.LernenImInternet.de">mitmachen lohnt sich</a>
Auf diese Art können Sie die Positionierung bestimmen und überlassen sie nicht dem Browser.

 
Hyperlink-Farben

Die Darstellung von Hyperlinks am Bildschirm hängt davon ab, ob der Hyperlink noch nicht angeklickt wurde, aktiv ist (gerade ausgeführt wird) oder bereits besucht wurde.

Diese drei Zustände werden durch Farben unterscheidbar:
 

  • Die Farbe des Hyperlinks: link="Farbnummer",
  • Die Farbe des aktiven Hyperlinks: alink="Farbnummer",
  • Die Farbe des besuchten Hyperlinks: vlink="Farbnummer",
alink steht für activ link, vlink für visited link.

Diese Farbangaben werden im einleitenden body-Tag gemacht:
 

<body link="#0000FF" alink="#FF0000" vlink="#00FF00">

Beachten Sie, dass in Ihrer HTML-Datei das einleitende body-Tag nur einmal erscheinen darf. Erweitern Sie lediglich das bereits bestehende body-Tag!

Auf unserer Seite finden Sie eine Übersicht der Standard Browser Farben, oder ein interaktives Tool zur Farbwahl.
Hyperlink-Target

Wenn Sie keine weiteren Angaben machen, wird die Datei, auf die der Hyperlink verweist, automatisch im gleichen Anwendungsfenster angezeigt wie die aktuelle. Sie können also immer im Browser mit dem Befehl zurück (Pfeil nach links) auf die vorherigen Seiten zurückkehren.
Wenn Sie mit Ihrem Hyperlink eine Seite ansteuern, die außerhalb Ihrer Webpräsenz liegt, kann es sinnvoll sein, die neue Seite in einem eigenen Anwendungsfenster zu öffnen. 

Beachten Sie die Veränderung in der Taskleiste am unteren Bildschirmrand!
Klicken Sie und es öffnet sich ein neues Anwedungsfenster.

Um dies zu erreichen, muss das Tag für den Hyperlink mit dem target-Attribut erweitert werden.

target ="_blank"

Beispiel:
 

<a href="http://www.LernenImInternet.de" target="_blank">HTML-online lernen</a>

Klicken Sie hier, um die Wirkung der Erweiterung um das Attribut target zu testen.
Zu empfehlen ist die Angabe des targets nur für Seiten außerhalb Ihrer Seiten. Solange Sie keine Angaben zu target machen bleiben Sie immer im aktuellen Fenster. 
Hyperlinks und Anker

Angenommen, Sie sind am Ende einer längeren Seite angelangt und es wird Ihnen angeboten, (über einen Hyperlink) nach oben zu gehen. Der Hyperlink führt zu einem Ziel in der gleichen Datei!

Außer dem eigentlichen Hyperlink wird noch ein Anker für das Hyperlink-Ziel benötigt. Um diesen Sprung an den Seitenanfang zu machen, müssen Sie an diese Stelle (in unserem Fall ganz oben) einen sogenannten Anker setzen. 

<a name="oben">Lektion 4</a>
Dieser Anker wurde in der ersten Zeile dieses Dokuments eingefügt.

Der Hyperlink zu diesem Anker lautet:
<a href="#oben">nach oben</a>
 

Beispiel:
 
<html>
<head>
<title></title>
</head>
<body>

<a name="oben">Lektion 4</a>

Text Text Text Text
 Text  Text Text Text Text
.
.
mindestens eine Seite Text.
mindestens eine Seite Text.
mindestens eine Seite Text.
.
.
Text Text Text Text
 Text  Text Text Text Text
 

<a href="#oben">nach oben</a>

</body>
<html>
 

Testen Sie selbst.

Für den Hyperlink selbst muss das Ziel in Anführungszeichen stehen, und der Anker muss mit dem # Zeichen beginnen.

Der Name des Ankers sollte keine Sonderzeichen, Umlaute oder Leerzeichen enthalten. Erlaubt ist lediglich der Unterstrich _  .

Sie müssen für die Definition des Ankers Text oder eine Grafik wählen: 
<a name="ankername">Hier muss etwas sein! Text oder Grafik</a>.
 

Einen Hyperlink auf einen Anker in einer anderen Datei setzen Sie so:

 

<a href="Dateineu.htm#mitte">in die Mitte der neuen Datei</a>

Der Hyperlink wird aufgebaut wie gewohnt. Der Dateiname wird mit # und dem Namen des Ankers erweitert. Der Anker muss natürlich in der anderen Datei vorhanden sein.

Beispiel:
 

<a href="../Lek2/Lektion2.html#Auf">Lektion2 auf einen Blick</a>

Kopieren Sie bitte alle Lektionen in den gleichen Ordner! Dann funktioniert der Link auf die Zusammenfassung der zweiten Lektion.
E-Mail

Einen Hyperlink zu einer E-Mail-Adresse setzen Sie so:

<a href="mailto:webmaster@jaitner.de">MAIL</a>

Anstatt den Dateinamen anzugeben, fügen Sie mailto: und die E-Mail-Adresse ein. Beachten Sie: Zwischen mailto und der E-Mail Adresse darf nur ein : (Doppelpunkt) stehen. Als E-Mail-Adresse können Sie jede gültige E-Mail-Adresse verwenden.
Verwechseln Sie diese Form der E-Mail nicht mit dem Ausfüllen eines E-Mail-Formulars, in das Sie Namen, Adresse o.ä. eingeben.

Beispiel:
 

<a href="mailto:webmaster@jaitner.de">Mail an den Webmaster</a>

Sieht so aus:

 Mail an den Webmaster
 

Aufgabe:

Erstellen Sie ein HTML-Dokument und binden Sie die folgenden Hyperlinks ein:
  • Einen Hyperlink mit einer relativen Pfadangabe auf eine weitere Seite von Ihnen
  • Einen absoluten Hyperlink auf eine Suchmaschine (google.de). Diese Seite soll sich in einem neuen Fenster öffnen
  • Bieten Sie auf Ihrer Seite die Möglichkeit zur Kontaktaufnahme über einen Hyperlink mit mailto an. Verwenden Sie Ihre E-Mail-Adresse und testen Sie, verschicken Sie die E-Mail und überprüfen Sie Ihr Postfach, ob diese Mail auch tatsächlich ankommt.
  • Binden Sie einen absoluten Hyperlink an eine Grafik.

vorige Lektion
nächste Lektion
Inhaltsverzeichnis nach oben

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben schicken Sie mir bitte eine Mail.

Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.